<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要评论的内容（最多吐槽120字）" maxlength="120"  v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postcomment">发表</mt-button>
        <div class="cmt-list">

            <div class="cmt-item" v-for="(val, i) in comment_list" :key="val.i">
                <div class="cmt-title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{val.user_name}}&nbsp;&nbsp;发表时间：{{val.add_time | dateFromat}}
                </div>
                <div class="cmt-body">
                    {{val.content==='undefined'?'此用户很懒，什么都没有说':val.content}}
                </div>
            </div>

        </div>
         <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>
<script>
import axios from 'axios'
import {Toast} from 'mint-ui'

export default {
    data(){
        return{
            comment_list:[],
            pageIndex:1,//默认展示第一页数据
            msg:''//评论输入的内容
        }
    },
    created(){
        this.getComments();
    },
    methods:{
        getComments(){//获取评论
            // 接口：'api/getcomments/:artid?pageindex=1'
          axios.get( "api/getcomments/" + this.id + "?pageindex=" + this.pageIndex )
          .then(res=>{
              if(res.data.status===0){
                //   this.comment_list=res.data.message
                //每当获取新评论的时候，不要把老数据清空覆盖，而是应该以老数据拼接上新数据
                this.comment_list=this.comment_list.concat(res.data.message);
              }
              else{
                  Toast('获取评论失败')
              }
          })
          .catch(res=>{
               Toast('获取评论数据失败')
          })
        },
        getMore(){
            // 加载更多
            this.pageIndex++;
            this.getComments();

        },
        postcomment(){
            // 校验是否为空:
            if(this.msg.trim().length===0){
              return  Toast('评论内容不能为空')
            }

            //发表评论、
            //参数1：请求的url地址。参数2：提交给服务器的数据对象{content:this.msg}
            // 参数3：定义提交的时候，表单中数据的格式 这个已经在全局设置了。
            //this.$route.params.id  表示获得路由中的 url 地址里面的id 值
            axios.post("api/postcomment/" + this.$route.params.id ,{content:this.msg.trim()})
            .then(res=>{
                if(res.data.status===0){
                    // 1.拼接出一个评论对象
                    var cmt={user_name:'匿名用户',add_time:Date.now(),content:this.msg.trim()}
                    this.comment_list.unshift(cmt);
                    this.msg=''
                }
                else{
                    Toast('填写错误')
                }
            })
            .catch(res=>{
                 Toast('网络请求失败')
            })
        }
    },
    props:["id"]
}
</script>
<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 18px;
    }
    textarea{
        margin: 0;
        height: 85px;
        font-size: 14px;
    }
    .cmt-list{
        margin: 5px 0;
        .cmt-item{
            font-size: 13px;
            .cmt-title{
                line-height: 30px; 
                background: #ccc;
            }
            .cmt-body{
               line-height: 35px;
               text-indent: 2em;
            }
        }
    }
    button{
        margin-bottom: 10px;
    }
}
</style>